<template>
	<view class="instock-succ-page">
		<view class="top-con c-flex jc-center c-flex-col c-item-center">
			<image :src="stockImgUrl+'stock-manage-succ.png'" style="width:232rpx;height:232rpx;" mode=""></image>
			<text>{{title}}成功，已{{title}}{{total}}瓶</text>
		</view>
		<order-table :headers="headers" :list="list" @onViewMore="onViewMore"></order-table>
		<view class="submit-bt" @click="goHome">我知道了</view>
		
		<!-- <uni-popup ref="popup" background-color="#fff" :borderRadius="'20rpx'" style="width:90%;" 
			:custom="true" :mask-click="true">
			<view class="pop-content" >
				<view class="header">查看更多</view>
				<view class="codes-list c-flex jc-between c-flex-wrap">
					<view class="code-item" v-for="(item,index) in codes" :key="i">
					{{item}}
					<text class="close" v-if="isShowDele" @click="onDele(item)">x</text>
					</view>
				</view>
				<view class="oper-con c-flex jc-between c-item-center" v-if="isShowDele">
					<view class="c-flex-1" @click="onCancel">取消</view>
					<view class="c-flex-1" @click="onConfirm">确定</view>
				</view>	
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import OrderTable from './components/order-table.vue';
	export default {
		components:{OrderTable},
		data() {
			return {
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				headers:[],
				list:[],
				total:0,
				type:'',
				codes:[],
				isShowDele:false,
				title:''
			};
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
			this.type = this.$store.getters.stockType;//options.type;
			if(this.type == 5){
				this.title = '出库';
				this.headers = [{name:'产品名称',field:'productName'},{name:'订单数量',field:'planSingle'},{name:'已出数量',field:'actSingle'}];
			}
			if(this.type == 6){
				this.title = '出库';
				this.headers = [{name:'产品名称',field:'productName'},{name:'出库数量',field:'actSingle'}];
			}
			if(this.type == 1 ||this.type == 7 ||this.type == 8 ||this.type == 0){
				this.headers = [{name:'产品名称',field:'productName'},{name:'入库数量',field:'actSingle'}];
				this.title = '入库';
			}
			uni.setNavigationBarTitle({
				title:this.title +'成功'
			})
			if(options.list){
				this.list = JSON.parse(options.list);
				this.total = options.total;
			}
		},
		methods:{
			goHome(){
				let url = '';
				if(this.type == 1){
					url = '/pages/delivery/stock-manage/outstock';
				}
				// uni.navigateTo({url:url})
				uni.navigateBack({delta:2});
			},
			onViewMore(val){
				// this.codes = val;
				// this.$refs.popup.open('center')
			},
			onDele(id){
				const arr = this.list.filter(item=>{return item != id});
				this.list = arr;
			},
			onCancel(){
				this.$refs.popup.close();
			},
			onConfirm(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.instock-succ-page{
	font-family: PingFangSC, PingFang SC;height:100%;padding:20rpx;
	position:relative; background-image: linear-gradient(rgba(249, 195, 115, .3) 10%,#F9F9F9 50%);
	.top-con{
		image{margin:62rpx 0 30rpx;}
		text{font-weight: 500;font-size: 30rpx;color: #333333;}
	}
	
	.submit-bt{
		width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;position: absolute;bottom: 182rpx;
		background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
		border-radius: 16rpx;border: 2rpx solid #E96949;color:#ffffff;
	}
	
	.picker-view {width: 750rpx;height: 500rpx;margin-top: 20rpx;}
	.search-con{
		margin: 0 36rpx;padding: 10rpx;background: #f3f3f3;border-radius: 20rpx;
		.input-con{    width: 100%;height: 60rpx;}
	}
	.pop-content{
		background: #fff;border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
		.header{
			font-weight: 500;font-size: 30rpx;color: #030303;    text-align: center;
		}
		.codes-list{
			gap:10rpx;    overflow-y: scroll;    height: 520rpx;padding: 20rpx;
			.code-item{
				flex-basis: 46%;text-align: center;background: #f5f5f5; padding: 10rpx;border-radius: 6rpx;
				.close{display: inline-block;width:40rpx;height:40rpx;background: #969696;border-radius: 50%;color: #ffffff;
					margin-left: 12rpx; transform: scale(0.7);}
			}
		}
	}
	.oper-con{
		margin:50rpx 0;text-align:center;
		view:first-child{font-weight: 500;font-size: 30rpx;color: #030303;}
		view:last-child{font-weight: 500;font-size: 30rpx;color: #E86748;}
	}
}
</style>
<style>
	.uni-popup .uni-popup__wrapper{
		width: 80%;border-radius: 20rpx;overflow: hidden;
	}
</style>